<template>
  <div class="p-[10px]" :style="{ width: props.width, height: props.height }">
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%; height: 100%"
      v-bind="states"
    >
      <el-table-column type="index" v-if="states.showIndex" />

      <el-table-column
        v-for="item in states.arrtData"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  responseData: {
    type: Object,
    default: () => ({}),
  },
});
let tableData = ref([]);
let tableRef = ref(null);
onMounted(() => {
  if (props.responseData && props.responseData.length > 0) {
    tableData.value = props.responseData as any;
  } else {
    tableData.value = props.models.tableData;
  }
});
watch(
  () => props.responseData,
  () => {
    if (props.responseData) {
      console.log("rops.responseData", props.responseData);
      init();
    }
  },
  {
    deep: true,
  }
);
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
const init = () => {
  tableData.value = props.responseData as any;
};
</script>

<style scoped lang="scss">
:deep(.el-table) {
  background-color: rgba(255, 255, 255, 0) !important;
}
:deep(.el-table tr) {
  background-color: rgba(255, 255, 255, 0) !important;
}
:deep(.el-table th.el-table__cell) {
  background-color: rgba(255, 255, 255, 0) !important;
}
</style>
